<template>
	<div>
		<Modal v-model="modal" :title="modalTitle" :mask-closable="false" @on-cancel="cancel">
			<Form ref="formValidate" :model="editData" :rules="ruleValidate" :label-width="100">
				<FormItem label="名称" prop="urlName">
					<Input v-model.trim="editData.urlName" placeholder="请输入名称"></Input>
				</FormItem>
				<FormItem label="链接地址" prop="url">
					<Input v-model.trim="editData.url" placeholder="请输入链接地址"></Input>
				</FormItem>
			</Form>
			<div slot="footer">
				<Button @click="cancel">取消</Button>
				<Button type="primary" @click="submit" :loading="loadingBtn">
					<span v-if="!loadingBtn">确定</span>
					<span v-else>请稍候...</span>
				</Button>
			</div>
		</Modal>
	</div>
</template>

<script>
	export default {
		components: {},
		props: {
			type: String
		},
		data() {
			//验证url
			const validateUrl = (rule, value, callback) => {
					var urlRegExp =
						/^((https|http|ftp|rtsp|mms)?:\/\/)+[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/;
					if (value) {
						if (!urlRegExp.test(value)) {
							callback('url格式不正确');
						} else {
							callback();
						}
					}
				};
				return {
					modal: false,
					modalTitle: '',
					editData: {
						urlName: '',
						url: ""
					},
					typeId: 0,
					urlId: '',
					isEdit: false,
					ruleValidate: {
						urlName: {
							required: true,
							message: '请输入名称'
						},
						url:[{
						required: true,
						message: '请输入url'	
						},{
							validator:validateUrl
						}]
					},
					loadingBtn: false
				}
		},
		methods: {
			show(res) {
				this.$nextTick(() => {
					this.modal = true
					// 根据类型判断显示对话框的标题
					switch (this.type) {
						case 'addIndustry':
							this.isEdit = false
							this.typeId = 1
							this.modalTitle = '新增行业信息'
							break
						case 'addCooperation':
							this.isEdit = false
							this.typeId = 2
							this.modalTitle = '新增合作厂商'
							break
						case 'addParts':
							this.isEdit = false
							this.typeId = 3
							this.modalTitle = '新增配件厂商'
							break
						case 'editIndustry':
							this.isEdit = true
							this.modalTitle = '编辑行业信息'
							this.typeId = res.row.type
							this.editData.urlName = res.row.urlName
							this.editData.url = res.row.url
							this.urlId = res.row.urlId
							break
						case 'editCooperation':
							this.isEdit = true
							this.modalTitle = '编辑合作厂商'
							this.typeId = res.row.type
							this.editData.urlName = res.row.urlName
							this.editData.url = res.row.url
							this.urlId = res.row.urlId
							break
						case 'editParts':
							this.isEdit = true
							this.modalTitle = '编辑配件厂商'
							this.typeId = res.row.type
							this.editData.urlName = res.row.urlName
							this.editData.url = res.row.url
							this.urlId = res.row.urlId
							break
					}
				})

			},

			//取消
			cancel() {
				this.modal = false;
			},
			//提交
			submit() {
				this.$refs['formValidate'].validate((valid) => {
					if (valid) {
						let data = {
							urlName: this.editData.urlName,
							url: this.editData.url,
							type: this.typeId,
							userId: 0

						}
						if (this.isEdit) {
							data.urlId = this.urlId
						}
						let url = '/home/information/save'
						this.$http.post(url, data).then(res => {
							if (res.status == 200) {
								if (res.data.code == 200) {
									this.$Message.success('操作成功')
									this.modal = false
									this.$emit('table')
								}

							}
						})
					}

				})

			},
			modalChange(state) {
				if (state) {

				} else {
					this.$refs.formValidate.resetFields()
				}
			}
		}
	}
</script>
<style scoped>
	.uploadSuccess {
		width: 200px;
		height: 100px;
	}
</style>
